<template>
    <div class="vo-forecast">
        <div class="item" v-for="(group,index) in dTeams" :key="index">
            <div class="vo-fc-title">Group {{index | fromCharCode}} 排名预测</div>
            <div v-for="(team,index) in group" :key="index" class="vo-fc-item" @click="_winGroup(team)" :class="{'active1': team.groupGrade == 1,'active2': team.groupGrade==2}">
                <div class="name">{{team.team}}</div>
                <!-- <img class="flag" :src="team.img"/> -->
                <div class="flag" :class="team.flag"></div>
                <span class="first-grade">第一名</span>
                <span class="second-grade">第二名</span>
            </div>
            <div class="btn-wrap">
                <mt-button type="danger" plain size="small" class="btn" @click="_toTaotai">随机生成其他小组结果，直接预测淘汰赛</mt-button>
                <!-- <mt-button type="danger" plain size="small" class="btn">直接跳至决赛</mt-button> -->
            </div>
            <vue-line :isMargin="true"></vue-line>
        </div>
        <div class="item" v-if="dGroupWiner.length > 0" id="vo-forecast-taotai">
            <div class="vo-fc-title">1/8决赛</div>
            <div v-for="(teams,index) in dGroupWiner" :key="index" class="vo-fc-item vo-fc-match">
                <div class="match" @click="_win('eight', teams[0], teams, dGroupWiner)" :class="{'active': teams[0].eightGrade}">
                    <div class="name">{{teams[0].team}}</div>
                    <div class="flag" :class="teams[0].flag"></div>
                </div>
                <div class="match-tag">vs</div>
                <div class="match" @click="_win('eight', teams[1], teams, dGroupWiner)" :class="{'active': teams[1].eightGrade}">
                    <div class="name">{{teams[1].team}}</div>
                    <div class="flag" :class="teams[1].flag"></div>
                </div>
            </div>
            <!-- <div class="btn-wrap">
                <mt-button type="danger" plain size="small" class="btn">直接跳至决赛</mt-button>
            </div> -->
            <vue-line :isMargin="true"></vue-line>
        </div>
        <div class="item" v-if="deightWiner.length > 0">
            <div class="vo-fc-title">1/4决赛</div>
            <div v-for="(teams,index) in deightWiner" :key="index" class="vo-fc-item vo-fc-match">
                <div class="match" @click="_win('four', teams[0], teams, deightWiner)" :class="{'active': teams[0].fourGrade}">
                    <div class="name">{{teams[0].team}}</div>
                    <div class="flag" :class="teams[0].flag"></div>
                </div>
                <div class="match-tag">vs</div>
                <div class="match" @click="_win('four', teams[1], teams, deightWiner)" :class="{'active': teams[1].fourGrade}">
                    <div class="name">{{teams[1].team}}</div>
                    <div class="flag" :class="teams[1].flag"></div>
                </div>
            </div>
            <!-- <div class="btn-wrap">
                <mt-button type="danger" plain size="small" class="btn">直接跳至决赛</mt-button>
            </div> -->
            <vue-line :isMargin="true"></vue-line>
        </div>
        <div class="item" v-if="dfourWiner.length > 0">
            <div class="vo-fc-title">半决赛</div>
            <div v-for="(teams,index) in dfourWiner" :key="index" class="vo-fc-item vo-fc-match">
                <div class="match" @click="_win('two', teams[0], teams, dfourWiner)" :class="{'active': teams[0].twoGrade}">
                    <div class="name">{{teams[0].team}}</div>
                    <div class="flag" :class="teams[0].flag"></div>
                </div>
                <div class="match-tag">vs</div>
                <div class="match" @click="_win('two', teams[1], teams, dfourWiner)" :class="{'active': teams[1].twoGrade}">
                    <div class="name">{{teams[1].team}}</div>
                    <div class="flag" :class="teams[1].flag"></div>
                </div>
            </div>
            <!-- <div class="btn-wrap">
                <mt-button type="danger" plain size="small" class="btn" @click="_toFinal">直接跳至决赛</mt-button>
            </div> -->
            <vue-line :isMargin="true"></vue-line>
        </div>
        <div class="item" v-if="dtwoLoser.length > 0">
            <div class="vo-fc-title">季军争夺赛</div>
            <div v-for="(teams,index) in dtwoLoser" :key="index" class="vo-fc-item vo-fc-match">
                <div class="match" @click="_win('one1', teams[0], teams, dtwoLoser)" :class="{'active': teams[0].one1Grade}">
                    <div class="name">{{teams[0].team}}</div>
                    <div class="flag" :class="teams[0].flag"></div>
                </div>
                <div class="match-tag">vs</div>
                <div class="match" @click="_win('one1', teams[1], teams, dtwoLoser)" :class="{'active': teams[1].one1Grade}">
                    <div class="name">{{teams[1].team}}</div>
                    <div class="flag" :class="teams[1].flag"></div>
                </div>
            </div>
            <!-- <div class="btn-wrap">
                <mt-button type="danger" plain size="small" class="btn">直接跳至决赛</mt-button>
            </div> -->
            <vue-line :isMargin="true"></vue-line>
        </div>
        <div class="item" v-if="dtwoWiner.length > 0">
            <div class="vo-fc-title">决赛</div>
            <div v-for="(teams,index) in dtwoWiner" :key="index" class="vo-fc-item vo-fc-match">
                <div class="match" @click="_win('one', teams[0], teams, dtwoWiner)" :class="{'active': teams[0].oneGrade}">
                    <div class="name">{{teams[0].team}}</div>
                    <div class="flag" :class="teams[0].flag"></div>
                </div>
                <div class="match-tag">vs</div>
                <div class="match" @click="_win('one', teams[1], teams, dtwoWiner)" :class="{'active': teams[1].oneGrade}">
                    <div class="name">{{teams[1].team}}</div>
                    <div class="flag" :class="teams[1].flag"></div>
                </div>
            </div>
            <br>
            <!-- <vue-line :isMargin="true"></vue-line> -->
        </div>
        <div class="btn-wrap">
            <mt-button type="danger" plain size="small" class="btn" @click="save">保存投票</mt-button>
        </div>
    </div>
</template>
<script>
import teams from './teams'
import flags from './flags'
import axios from 'axios'
import util from '@/common/util'
export default {
    filters: {
        fromCharCode (code) {
            return String.fromCharCode(code + 65)
        }
    },
    data () {
        return {
            dTeams: teams.map((group) => {
                return group.map((team) => {
                    team.flag = flags[team.id].flag;
                    return team;
                })
            }),
            dGroupWiner: [],
            dGroupCount: 0,
            deightWiner: [],
            deightCount: 0,
            dfourWiner: [],
            dfourCount: 0,
            dtwoWiner: [],
            dtwoCount: 0,
            dtwoLoser: [],
            done1Count: 0,
            doneCount: 0
        }
    },
    methods: {
        _winGroup (team) {
            var group = this.dTeams[team.group-1], wins;
            if (team.groupGrade) {
                team.groupGrade = 0;
                wins = group.filter((item) => {
                    return item.groupGrade;
                });
                if (wins.length > 0) {
                    if (wins[0].groupGrade == 2) {
                        wins[0].groupGrade--;
                    }
                    this.dGroupCount--;
                    this.deightWiner = [];
                    this.deightCount = 0;
                    this.dfourWiner = [];
                    this.dfourCount = 0;
                    this.dtwoWiner = [];
                    this.dtwoCount = 0;
                    this.dtwoLoser = [];
                    this.done1Count = 0;
                    this.doneCount = 0;
                }
            }else {
                wins = group.filter((item) => {
                    return item.groupGrade;
                });
                if (wins.length < 2) {
                    team.groupGrade = [1, 2][wins.length];
                    if (team.groupGrade == 2) {
                        this.dGroupCount++;
                    }
                }
            }
            this.$forceUpdate();
            this.dGroupWiner = [];
            if (this.dGroupCount == 8) {
                this._getGroupWiner();
            }
        },
        _getGroupWiner () {
            for (var i = 0; i < 8; i++) {
                this.dGroupWiner.push([]);
            }
            this.dTeams.forEach((group, index) => {
                group.forEach((team) => {
                    if (team.groupGrade == 1) {
                        this.dGroupWiner[team.group-1].push(team);
                    }else if (team.groupGrade == 2) {
                        if (index % 2 == 0) {
                            this.dGroupWiner[index+1].push(team);
                        }else{
                            this.dGroupWiner[index-1].push(team);
                        }
                    }
                })
            });
        },
        _win (type, item, group, all) {
            var key = `${type}Grade`;
            var list = `${type}Winer`;
            var count = `d${type}Count`;
            var max = {'eight': 8,'four': 4, 'two':2, 'one':1, 'one1':1}[type];
            if (item[key]) {
                return;
            }
            if (item[key] === undefined) {
                this[count]++;
            }
            group.forEach((i) => {
                i[key] = 0;
            })
            item[key] = 1;
            this.$forceUpdate();
            if (this['d' + list]) {
                this['d' + list] = [];
                if (this[count] == max) {
                    this[`_get${list.charAt(0).toUpperCase() + list.slice(1)}`](this['d' + list]);
                }
            }
            this.$emit('input', this.doneCount && this.done1Count > 0 ? this.collect() : null);
        },
        //获取8强胜者分组
        _getEightWiner (list) {
            for (var i = 0; i < 4; i++) {
                list.push([]);
            }
            this.dGroupWiner.forEach((group, index) => {
                group.forEach((team) => {
                    if (team.eightGrade == 1) {
                        if (index == 0 || index == 2) {
                            list[0].push(team);
                        }else if (index == 1 || index == 3) {
                            list[1].push(team);
                        }else if (index == 4 || index == 6) {
                            list[2].push(team);
                        }else{
                            list[3].push(team);
                        }
                    }
                })
            })
        },

        //获取4强胜者分组
        _getFourWiner (list) {
            for (var i = 0; i < 2; i++) {
                list.push([]);
            }
            this.deightWiner.forEach((group, index) => {
                group.forEach((team) => {
                    if (team.fourGrade == 1) {
                        if (index == 0 || index == 2) {
                            list[0].push(team);
                        }else {
                            list[1].push(team);
                        }
                    }
                })
            })
        },

        _getTwoWiner (list) {
            this['dtwoLoser'] = [[]];
            for (var i = 0; i < 1; i++) {
                list.push([]);
            }
            this.dfourWiner.forEach((group, index) => {
                group.forEach((team) => {
                    if (team.twoGrade == 1) {
                        list[0].push(team);
                    }else {
                        this['dtwoLoser'][0].push(team);
                    }
                })
            })
        },

        save () {
            var data = this.collect();
            axios.post(`/api/java/predict/predictAll`, {
                openid: window.app.openId,
                ...data
            }).then((res) => {
                util.alert('保存成功').then(action => {
                    this.$router.push({
                        name: 'voteresult'
                    });
                })
            })
        },

        collect () {
            var groups = [];
            var knockouts = [];
            this.dTeams.forEach((teams,index) => {
                groups.push({
                    group: String.fromCharCode(index + 65),
                    matches: []
                });
                teams.forEach((team) => {
                    if (team.groupGrade) {
                        groups[groups.length-1].matches[team.groupGrade-1] = {
                            "rank": team.groupGrade,
                            "countryId": team.id
                        }
                    }
                })
            });
            knockouts.push({
                matchType: 2,
                matches: []
            })
            this.dGroupWiner.forEach((teams, index) => {
                knockouts[knockouts.length-1].matches.push({
                    "gameId":54,
                    "homeCountryId": teams[0].id,
                    "awayCountryId": teams[1].id,
                    "winCountryCode": teams[0].eightGrade ? teams[0].id:teams[1].id
                });
            });
            knockouts.push({
                matchType: 3,
                matches: []
            });
            this.deightWiner.forEach((teams, index) => {
                knockouts[knockouts.length-1].matches.push({
                    "gameId": 54,
                    "homeCountryId": teams[0].id,
                    "awayCountryId": teams[1].id,
                    "winCountryCode": teams[0].fourGrade ? teams[0].id:teams[1].id
                });
            });
            knockouts.push({
                matchType: 4,
                matches: []
            });
            this.dfourWiner.forEach((teams, index) => {
                knockouts[knockouts.length-1].matches.push({
                    "gameId": 54,
                    "homeCountryId": teams[0].id,
                    "awayCountryId": teams[1].id,
                    "winCountryCode": teams[0].twoGrade ? teams[0].id:teams[1].id
                });
            });
            knockouts.push({
                matchType: 5,
                matches: []
            });
            this.dtwoLoser.forEach((teams, index) => {
                knockouts[knockouts.length-1].matches.push({
                    "gameId": 54,
                    "homeCountryId": teams[0].id,
                    "awayCountryId": teams[1].id,
                    "winCountryCode": teams[0].one1Grade ? teams[0].id:teams[1].id
                });
            });
            knockouts.push({
                matchType: 6,
                matches: []
            });
            this.dtwoWiner.forEach((teams, index) => {
                knockouts[knockouts.length-1].matches.push({
                    "gameId": 54,
                    "homeCountryId": teams[0].id,
                    "awayCountryId": teams[1].id,
                    "winCountryCode": teams[0].oneGrade ? teams[0].id : teams[1].id
                });
            });
            return {
                groups,
                knockouts
            }
        },

        _toTaotai () {
            this.dTeams.forEach((group) => {
                var random;
                var losers = group.filter((team) => {
                    return !team.groupGrade;
                })
                if (losers.length == 4) {
                    random = Math.floor(Math.random() * 4);
                    losers[random].groupGrade = 1;
                    losers = losers.filter((team) => {
                        return !team.groupGrade;
                    })
                }
                if (losers.length == 3) {
                    random = Math.floor(Math.random() * 3);
                    losers[random].groupGrade = 2;
                }
            })
            this.dGroupCount = 8;
            this._getGroupWiner();
            this.$forceUpdate();
            this.$emit('taotai');
        }
    }
}
</script>
<style lang="less" scoped>
    @import '~assets/less/country.less';
    .vo-forecast {
        padding: 0 20px;
    }
    .vo-fc-title {
        text-align: center;
        font-size: 15px;
        margin-bottom: 10px;
        color: #fff;
    }
    .item {
        overflow: hidden;
    }
    .vo-fc-item {
        overflow: hidden;
        position: relative;
        float: left;
        width: 50%;
        margin-bottom: 10px;
        padding: 15px 0;
        transition: all 0.5s;
        box-sizing: border-box;
        border: 2px solid transparent;
        border-radius: 10px;
        color: #fff;
        .name {
            width: 50px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 20px;
        }
        .flag {
            display: inline-block;
            width: 65px;
            height: 60px;
            vertical-align: middle;
        }
        .first-grade,
        .second-grade {
            position: absolute;
            display: none;
            padding: 3px;
            top: 0;
            left: 0;
            font-size: 12px;
        }
    }
    .vo-fc-match {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 0;
        .flag {
            width: 65px;
            height: 60px;
        }
        .name {
            margin: 0;
        }
        .match {
            display: inline-block;
            padding: 10px 5px;
            border: 2px solid transparent;
            border-radius: 10px;
            transition: all 0.5s;
        }
        .match-tag {
            display: inline-block;
            margin: 0 20px;
            line-height: 70px;
        }
    }
    .btn-wrap {
        display: flex;
        clear: both;
        justify-content: center;
        .btn {
            margin: 0 10px;
            border-color: #fff;
            color: #fff;
        }
    }
    .active,
    .active1,
    .active2 {
        border-color: #fff!important;
    }
    .active1 {
        .first-grade {
            display: block;
        }
    }
    .active2 {
        .second-grade {
            display: block;
        }
    }
</style>
